<script lang="ts" setup>
// 导入组件
import { ref, reactive, getCurrentInstance } from "vue";
// 引入Vue组件
import PagnationVue from "../public/Paginations.vue";
import { ElMessage, ElMessageBox} from "element-plus";
// 导入按钮图标
import { Edit, More, Delete } from "@element-plus/icons-vue";
// 导入数据的api
import Api from "../../api";
// 引入表单校验的模块
import MyRules from "../../rules/staff";
// 获取当前的实例
const { proxy } = getCurrentInstance() as any;

// 定义当前页面分页的数据
var pageData = reactive({
  page: ref(1),
  size: ref(15),
  total: ref(0),
});

// 定义页面需要绑定的数据
var Data = reactive({
  // =========== 查询区域 ============
  // 输入的查询文本
  q_str: ref(""),
  // 所有的角色信息
  roles: reactive([]),
  // 弹出层是否展现
  dialogVisible: ref(false),
  // 权限条目
  permission: ref(),
  // 默认选中的权限
  defaultSelected: [],
  // 选中的集合
  selectedPermisson: [],
  // 当前的角色
  currentRoles: ref(""),

  currentRolesName: ref(""),
});

// 定义一个autoRun函数 -- 页面加载后自动运行
const autoRun = () => {
  // 自动获取员工信息
  getData();
};

// 获取数据
const getData = () => {
  let params = {
    page: pageData.page,
    size: pageData.size,
    search: Data.q_str,
  };
  Api.Roles.getAll(params).then((res) => {
    // 赋值
    Data.roles = res.data.results;
    //为分页的赋值
    pageData.total = res.data.count;
  });
};

// 定义树状结构的key
const defaultProps = {
  children: "children",
  label: "label",
};


// 点击分配权限的按钮
const assignPermission = (row: any) => {
  // 跳出弹出层
  Data.dialogVisible = true;
  // 加载所有的权限条目
  getPermissions();
  // 获取当前角色id
  Data.currentRoles = row.id;
  Data.currentRolesName = row.name;
  // 获取当前角色的权限
  listPermission(row.id);

};

// 获取当前角色的权限
const listPermission = async (id: any) => {
  await Api.Roles.listPermissions(id).then((res) => {
    // 获取当前角色的权限
    Data.defaultSelected = res.data.data;
    // 赋值当前tree对象
    proxy.$nextTick(function () {
      proxy.$refs.treeRef.setCheckedKeys(Data.defaultSelected, false);
    });
  });
};

// 获取权限弹出层中的权限明细
const getPermissions = () => {
  // 获取权限信息 --- 初始化树状结构
  Api.Permission.select().then((res) => {
    Data.permission = res.data.data;
  });
};

// 提交到后台
const commitLayer = () => {
  // 提交到后台！
  Api.Roles.assign(Data.currentRoles, { permissions: Data.selectedPermisson }).then(
    (res) => {
      if (res.status === 200) {
        // 显示成功提示
        ElMessage({
          message: "权限添加成功！",
          type: "success",
        });
      }
    }
  );
  // 关闭
  closeLayer();
};

// 关闭分配权限的弹出层
const closeLayer = () => {  
  // 隐藏弹出层
  Data.dialogVisible = false;
  // 关闭时清除选择 
  Data.defaultSelected = [];
  // 重新赋值
   proxy.$nextTick(function () {
      proxy.$refs.treeRef.setCheckedKeys(Data.defaultSelected, false);
    });

};

const currentChecked = (nodeObj: any, SelectedObj: any) => {
  // 获取选中的节点集合
  var Selected = SelectedObj.checkedNodes;
  // 清空当前选中的节点集合
  Data.selectedPermisson = [];
  // 遍历集合获取所有选中节点集合的Id
  for (var node of Selected) {
    Data.selectedPermisson.push(node.id);
  }
};

// 自动执行
autoRun();
</script>

<template>
  <!-- 1. 查询区域 -->
  <el-form :inline="true" class="demo-form-inline" style="display: flex">
    <el-form-item label="查询条件：" width="100">
      <el-input v-model="Data.q_str" placeholder="请输入查询条件" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="getData">
        <el-icon><component class="icons" is="Search"></component></el-icon>
        <span>查询</span>
      </el-button>
      <el-button type="primary" @click="listAllStaffs">
        <el-icon><component class="icons" is="List"></component></el-icon>
        <span>全部</span>
      </el-button>
      <el-button type="primary" @click="addStaff">
        <el-icon><component class="icons" is="CirclePlus"></component></el-icon>
        <span>添加</span>
      </el-button>
    </el-form-item>
  </el-form>

  <!--2. 表格区域 -->
  <el-table
    :data="Data.roles"
    border
    stripe
    style="width: 100%"
    :header-cell-style="{ backgroundColor: '#409EFF', color: '#FFF', fontSize: '14px' }"
  >
    <el-table-column label="序号" type="index" align="center" width="60" />
    <el-table-column label="角色名称" prop="name" align="center" width="300" />
    <el-table-column label="描述" prop="desc" align="center" />
    <el-table-column label="操作" align="center" width="300">
      <template #default="scope">
        <el-button
          type="warning"
          :icon="Edit"
          circle
          size="small"
          @click="editStaff(scope.row)"
        />
        <el-button type="danger" :icon="Delete" circle size="small" />
        <el-button type="success" round size="small" @click="assignPermission(scope.row)"
          >分配权限</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!--3. 分页  -->
  <PagnationVue :page="pageData"></PagnationVue>

  <!--4. 分配权限的弹出层 -->
  <el-dialog v-model="Data.dialogVisible" width="20%">
    <!--标题部分-->
    <template #title>
      <div style="font-size: 18px; color: #409eff; font-weight: bold; text-align: left">
        <span>【{{Data.currentRolesName}}】分配权限</span>
      </div>
    </template>

    <el-tree
      ref="treeRef" 
      :data="Data.permission"
      :props="defaultProps"
      node-key="id"
      :highlight-current="true"
      @check="currentChecked"
      style="padding: 5px 40px"
      show-checkbox
    />

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="commitLayer">提交</el-button>
        <el-button @click="closeLayer">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
